<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="panel_rule">
    <div class="panel_rule_top">
      <div class="panel_rule_tool"></div>
      <div
        id="RuleTopBox"
        class="panel_rule_mark_top"
        @dblclick="onLayoutHandel(ExtendCanvas)"
      ></div>
    </div>
    <div class="panel_rule_bottom">
      <div
        id="RuleLeftBox"
        class="panel_rule_mark_left"
        @dblclick="onLayoutHandel(ExtendCanvas)"
      ></div>
      <div ref="RefRuleScreen" class="panel_rule_screens" @scroll="onScroll">
        <div ref="RefRuleCanvas" class="panel_rule_canvas">
          <slot name="SlotCanvas"></slot>
          <slot name="SlotGrid"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from "vue";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 图元端函数引入
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { onDrawRuler, onLayoutHandel } from "@/functions";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useCanvasStore } from "@/store/canvasStore"; // 画布
import { useLayoutStore } from "@/store/layoutStore"; // 布局

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const canvasStore = useCanvasStore(); // 画布
const layoutStore = useLayoutStore(); // 布局
// 设备数据

/* ================================================================================================ */
//                                变量
/* ================================================================================================ */
/** 屏幕参数 */
let RefRuleScreen = ref();
/** 画布参数 */
let RefRuleCanvas = ref();
/** 展开画布 */
const ExtendCanvas = {
  label: "画布",
  key: "canvas",
  frameActive: false,
  labelShow: true,
  category: "down",
};
/* ================================================================================================ */
//                               函数
/* ================================================================================================ */
/** 卷轴拖拽 */
const onScroll = () => {
 // console.log("卷轴拖拽")
  const screenRect = RefRuleScreen.value.getBoundingClientRect();
  const canvasRect = RefRuleCanvas.value.getBoundingClientRect();
  /** 卷轴偏移x */
  canvasStore.scrollX = screenRect.left - canvasRect.left;
  /** 卷轴偏移x */
  canvasStore.scrollY = screenRect.top - canvasRect.top;
  onDrawRuler()
};

/* ================================================================================================ */
//                               监听
/* ================================================================================================ */
// 画布缩放
watch(
  () => canvasStore.canvasAttr.canvasScale,
  () => {
    onDrawRuler();
  }
);
// 工作框宽度
watch(
  () => layoutStore.WorkFrameWidth,
  () => {
    onDrawRuler();
  }
);

/* ================================================================================================ */
//                              挂载后
/* ================================================================================================ */
onMounted(() => {
 // console.log("挂载后")
  onDrawRuler(); //绘制-标尺
});
</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";
.panel_rule {
  width: 100%;
  height: 100%;
  user-select: none;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  background-color: rgb(83, 83, 83);
  font-size: 5px;

  //-----------------------------标尺上部
  .panel_rule_top {
    margin: 0px;
    width: 100%;
    height: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    // 标尺工具
    .panel_rule_tool {
      margin: 0px;
      width: 40px;
      height: 40px;
      z-index: -1;
    }

    // 上边标尺
    .panel_rule_mark_top {
      margin-left: 1px;
      height: 20px;
      width: 100%;
    }
  }

  //-----------------------------标尺下部
  .panel_rule_bottom {
    margin: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    // 左边标尺
    .panel_rule_mark_left {
      margin: 0px;
      width: 40px;
      height: 100%;
    }

    // 画布
    .panel_rule_screens {
      margin: 0px;
      width: 100%;
      height: 100%;
      position: relative;
      overflow: auto;
      /* firefox */
      scrollbar-color: rgba(144, 146, 152, 0.3) transparent;
      scrollbar-width: auto;

      /* chrome */
      &::-webkit-scrollbar,
      &::-webkit-scrollbar-track-piece {
        background-color: transparent;
      }

      &::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: rgb(197, 197, 197);
      }
    }

    .panel_rule_canvas {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
</style>
